<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>右键菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            position: absolute;
            display: none;
        }

        ul li {
            display: block;
            width: 140px;
            height: 40px;
            background-color: orange;
            color: grey;
            text-align: center;
            line-height: 40px;
        }

        ul li:hover {
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>
    <ul>
        <li>刷新</li>
        <li>打开</li>
        <li>关闭</li>
        <li>搜索</li>
    </ul>
    <script>
        var rightMenu = document.querySelector('ul');
        document.oncontextmenu = function (e) {
            e.preventDefault();
            rightMenu.style.display = "block";
            rightMenu.style.left = e.clientX + 'px';
            rightMenu.style.top = e.clientY + 'px';

        }
        document.onclick = function () {
            rightMenu.style.display = 'none';
        }
        rightMenu.onclick = function (e) {
            switch (e.target.innerHTML) {
                case '刷新':
                    location.reload();
                    break;
                case '打开':
                    open("http://baidu.com");
                    break;
                case '关闭':
                    close();
                    break;
                case '搜索':
                    var res = prompt('请输入搜索关键词', '特朗普');
                    open(`http://baidu.com/s?wd=${res}`);
                    break;
            }
        }
    </script>
</body>

</html>